window.AppContext = ( function() {
	
	function fetchAndParse( URL ) {
		return fetch( URL ).then( ( response ) => {
			return response.text();
		} ).then( ( html ) => {
			const parser = new DOMParser();//*
			const document = parser.parseFromString( html, 'text/html' );
			const head = document.head;
			const template = head.querySelector( 'template' );
			const style = head.querySelector( 'style' );
			const script = head.querySelector( 'script' );

			return {
				template,
				style,
				script
			};
		} );
	}
	

	
	function getSettings( { template, style, script } ) {
		const jsFile = new Blob( [ script.textContent ], { type: 'application/javascript' } );//*
		const jsURL = URL.createObjectURL( jsFile );
		return import( jsURL ).then( ( module ) => {
			module.default.template=template;
			return  module.default;
		} );
	}
	

	function loadComponentAsyn (url,context) {
		 return function(){
				     return  {
				        component:  fetchAndParse( url+"?t="+(new Date().getTime())).then(getSettings)// 不渲染元素
				        ,
				        /* 加载过程中显示的组件 */
				        loading: {
				            template: '<p>加载中...</p>'
				        },
				        /* 出现错误时显示的组件  */
				        error: {
				            template: '<p style="color:red;">load failed!</p>'
				        },
				        /* loading组件的延迟时间 */
				        delay: 10,
				        /* 最长等待时间，如果超过此时间，将显示error组件。 */
				        timeout:3200
				    };
		}
    }
	
	
	function loadComponent (url,options){
  	  return loadComponentAsyn(url,options);
  	}
	
	function createComponent (tagName,templateUrl,dialogOptions){
    	 return Vue.component(tagName,()=>loadComponent(templateUrl,dialogOptions));
    }
	
	
	return {loadComponentAsyn,loadComponent};
	
}() );
